<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Fetch API</title>
        <style type="text/css">
            h3 { text-align: center; }
            .wrapper {
                margin: 25px auto;
                border: 1px solid blue ;
                width: 80vw;
            }
            .wrapper .static,
            .wrapper .proto {
                margin: 10px;
                border: 1px solid gray ;
            }
            .wrapper .static>div ,
            .wrapper .proto>div {
                margin: 10px ;
                border-bottom: 1px solid #dedede;
            }
            .wrapper .static>div:last-child,
            .wrapper .proto>div:last-child {
                border-bottom: none;
            }
            .wrapper>.title {
                margin: 10px;
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>

        <h3>Fetch API</h3>

        <div class="wrapper headers">
            <p class="title">Headers静态属性</p>
            <div class="static"></div>
            <p class="title">Headers原型属性</p>
            <div class="proto"></div>
        </div>

        <script type="text/javascript">
            const headersStatic = document.querySelector( '.headers>.static' );
            names = Object.getOwnPropertyNames( Headers );
            names.forEach( name => {
                let node = document.createElement('div');
                node.innerHTML = name; 
                headersStatic.appendChild( node );
            });
            
            const headersProto = document.querySelector( '.headers>.proto' );
            names = Object.getOwnPropertyNames( Headers.prototype );
            names.forEach( name => {
                let node = document.createElement('div');
                node.innerHTML = name; 
                headersProto.appendChild( node );
            });
        </script>

        <div class="wrapper req">
            <p class="title">Request静态属性</p>
            <div class="static"></div>
            <p class="title">Request原型属性</p>
            <div class="proto"></div>
        </div>

        <script type="text/javascript">
            const reqStatic = document.querySelector( '.req>.static' );
            let names = Object.getOwnPropertyNames( Request );
            names.forEach( name => {
                let node = document.createElement('div');
                node.innerHTML = name; 
                reqStatic.appendChild( node );
            });
            
            const reqProto = document.querySelector( '.req>.proto' );
            names = Object.getOwnPropertyNames( Request.prototype );
            names.forEach( name => {
                let node = document.createElement('div');
                node.innerHTML = name; 
                reqProto.appendChild( node );
            });
        </script>

        <div class="wrapper resp">
            <p class="title">Response静态属性</p>
            <div class="static"></div>
            <p class="title">Response原型属性</p>
            <div class="proto"></div>
        </div>

        <script type="text/javascript">
            const respStatic = document.querySelector( '.resp>.static' );
            names = Object.getOwnPropertyNames( Response );
            names.forEach( name => {
                let node = document.createElement('div');
                node.innerHTML = name; 
                respStatic.appendChild( node );
            });
            
            const respProto = document.querySelector( '.resp>.proto' );
            names = Object.getOwnPropertyNames( Response.prototype );
            names.forEach( name => {
                let node = document.createElement('div');
                node.innerHTML = name; 
                respProto.appendChild( node );
            });
        </script>

        
    </body>
</html>